<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的浮动</title>
    <style>
        .container{
            width: 1000px;
            height: 800px;
            border: 1px solid purple;
            margin: 0 auto;
        }
        /*
            浮动元素的特点
                1.浮动的元素会脱离文档流,不再占据原有的文档空间
                2.设置了浮动的元素会向父元素的左侧或者右侧浮动,触碰到父元素的边界或者另一个浮动的元素时停止浮动
                3.设置浮动的元素不会浮动到父元素的外面
                4.浮动的元素向左或者向右浮动时,不会超出前面浮动的元素
                5.如果浮动的元素上面是一个没有浮动的元素,则该元素不会上移
                6.浮动的元素不会超出它上面浮动的兄弟元素,最多一样高。即:后面的元素不会跑到前面元素的上方
        */
        .c1{
            width: 200px;
            height: 100px;
            background: red;
            float: right;
        }
        .c2{
            width: 800px;
            height: 100px;
            background: green;
            /*float: right;*/
        }
        .c3{
            width: 200px;
            height: 100px;
            background: blue;
            float: right;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
</div>
</body>
</html>